<template>
	<view class="container">
		<u-sticky bg-color="#f7f7f7" :offset-top="0" h5NavHeight="0">
			<view class="search-bar" style="background-color: #f7f7f7;">
				<u-search bg-color="#fff" :action-style="btnStyle" placeholder="输入要查询的手机号/昵称/ID" shape="square"
					v-model="keyword" :input-style="{fontSize:'24rpx'}" height="52"></u-search>
			</view>

			<view class="sort-bar">
				<view class="sort-item" :class="{active: sort==''}" @click="sortChange('')">全部</view>
				<view class="sort-item" :class="{active: sort=='update_time'}" @click="sortChange('update_time')">
					<text>活跃</text>
					<view class="sort-types">
						<u-icon :color="sort=='update_time' && sort_type=='asc'?'#00AF4E':'#CDCDCD'" size="6"
							name="arrow-up-fill"></u-icon>
						<u-icon :color="sort=='update_time' && sort_type=='desc'?'#00AF4E':'#CDCDCD'" size="6"
							name="arrow-down-fill"></u-icon>
					</view>
				</view>
				<view class="sort-item" :class="{active: this.sort=='create_time'}" @click="sortChange('create_time')">
					<text>注册时间</text>
					<view class="sort-types">
						<u-icon :color="sort=='create_time' && sort_type=='asc'?'#00AF4E':'#CDCDCD'" size="6"
							name="arrow-up-fill"></u-icon>
						<u-icon :color="sort=='create_time' && sort_type=='desc'?'#00AF4E':'#CDCDCD'" size="6"
							name="arrow-down-fill"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="cell-group" :key="i" v-for="(x,i) in list">
			<u-cell-item icon-size="80"
				:icon-style="{marginRight:'24rpx',width:'80rpx',height:'80rpx',overflow: 'hidden',borderRadius: '50%'}"
				:icon="x.avatar_url" :label-style="{marginTop:0,fontSize:'22rpx',color:'#969696'}"
				:label="x.create_time | date" :arrow="false">
				<view slot="title" class="flex align-center">
					<text style="line-height: 40rpx;">{{x.nick_name}}</text>
					<grade-icon style="margin: 0 0 0 10rpx;transform: scale(0.9);" v-if="x.grade_id>0"
						:name="x.grade_name"></grade-icon>
				</view>

				<u-button size="mini" shape="circle" plain type="success" @click="makePhoneCall(x.phone)"
					:custom-style="{backgroundColor:'#fff!important'}">联系TA</u-button>
			</u-cell-item>
		</view>

		<view class="pt15 pb15">
			<u-empty text="亲，暂无相关数据" v-if="list.length==0 && loading=='nomore'" icon-size="200" font-size="28"
				margin-top="200"></u-empty>

			<u-loadmore v-else :status="loading" @loadmore="getList" />
		</view>
	</view>
</template>

<script>
	//等级图标
	import GradeIcon from '@/components/user/grade-icon.vue'
	import * as Api from '@/api/user/fans.js'
	export default {
		components: {
			GradeIcon
		},
		data() {
			return {
				page: 0,
				list: [],
				loading: 'loadmore',
				sort: '', //update_time,create_time
				sort_type: 'desc', //asc
				keyword: '',
				btnStyle: {
					width: '120rpx',
					height: '52rpx',
					lineHeight: '52rpx',
					background: 'linear-gradient(-90deg, #55E964 0%, #00AF4E 100%)',
					borderRadius: '8rpx',
					fontSize: '24rpx',
					fontWeight: 500,
					color: '#FFFFFF'
				}
			};
		},
		methods: {
			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				});
			},
			async getList() {
				if (this.loading == 'loading' || this.loading == 'nomore') return;
				this.loading = 'loading';
				const res = await Api.list({
					page: ++this.page,
					key: this.keyword,
					sort: this.sort,
					sort_type: this.sort_type
				});
				if (res.data) {
					let {
						current_page,
						total,
						data,
					} = res.data;

					if (data) {
						this.page = current_page;
						this.list = this.list.concat(data)
					} else {
						this.list = []
						total = 0;
					}

					setTimeout(() => {
						if (this.list.length >= total) this.loading = 'nomore';
						else this.loading = 'loadmore';
					}, 500)
				}
			},
			sortChange(sort) {
				if (this.sort == sort) {
					this.sort_type = this.sort_type == 'desc' ? 'asc' : 'desc'
				} else {
					this.sort_type = 'desc';
				}
				this.sort = sort;
				this.list = [];
				this.page = 0;
				this.loading = 'loadmore';
				this.getList();
			},
			onSearch(val) {
				this.keyword = val;
				this.sortChange('');
			}
		},
		onReachBottom() {
			this.getList();
		},
		created() {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #F7F7F7;
	}

	.search-bar {
		padding: 19rpx 30rpx;
	}

	.sort-bar {
		width: 750rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx 36rpx 0rpx 0rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 20rpx;
		position: relative;

		&:after {
			content: "";
			z-index: 1;
			position: absolute;
			height: 80rpx;
			left: 0;
			right: 0;
			bottom: -80rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		}

		.sort-item {
			padding: 0 40rpx;
			height: 72rpx;
			line-height: 72rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #484848;
			display: flex;
			align-items: center;

			&.active {
				font-weight: bold;
				color: #00AF4E;
			}

			.sort-types {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				margin-left: 10rpx;
			}
		}
	}

	.cell-group {
		margin: 0 32rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}
</style>